<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String cKey = request.getParameter("cKey");
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=8">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta content="B2B电商平台" name="description" />
		<meta content="B2B电商平台" name="keyword" />

		<title>B2B电商平台.相似商品</title>
		<link rel="icon" href="include/images/icss.ico" type="image/x-icon" />
		<link rel="shortcut icon" href="include/images/icss.ico" type="image/x-icon" />
		<link rel="stylesheet" type="text/css" href="<%=path%>/include/css/global.css" />
		<link rel="stylesheet" type="text/css" href="<%=path%>/include/css/style.css" />
		<link rel="stylesheet" type="text/css" href="<%=path%>/include/css/pro.css" />
		<link rel="stylesheet" type="text/css" href="<%=path%>/include/css/proManage.css" />
		<link rel="stylesheet" href="<%=path%>/include/JQuery ui/css/smoothness/jquery-ui-1.7.3.custom.css" type="text/css"></link>
		<link rel="stylesheet" type="text/css" href="<%=path%>/include/pagination/page.css" media="all">
			
		<link rel="stylesheet" type="text/css" href="<%=path %>/include/css/mmt_trading.css" />
		<script type="text/javascript" src="<%=path%>/include/js/jquery-1.8.0.min.js"></script>
		<script type="text/javascript" src="<%=path%>/include/js/cookies.js"></script>
		<script type="text/javascript" src="<%=path%>/include/js/icss.busin.js"></script>
		<script type="text/javascript" src="<%=path%>/include/JQuery ui/js/jquery-ui-1.7.3.custom.min.js"></script>
		<script type="text/javascript" src="<%=path%>/include/js/icss.common.js"></script>
		<script type="text/javascript" src="<%=path%>/include/pagination/jquery.pagination.js"></script>
		<script type="text/javascript" src="<%=path%>/include/pagination/init.js"></script>
		<script type="text/javascript" src="<%=path%>/include/js/doT.min.js"></script>
		<script type="text/javascript" src="<%=path%>/include/layer/layer.js"></script>	
		<style type="text/css">
			.table tr td {
				border-left: 1px solid #ddd;
				border-bottom: 1px solid #ddd;
				height: 33px;
			}
			
			.table tr th {
				border-left: 1px solid #ddd;
				font-weight: bold;
			}
			em.create {
			    background-position: -50px -44px;
			    line-height: 28px;
			    display: inline-block;
			    font-style: normal;
			    background-repeat: no-repeat;
			    text-indent: 15px;
			    float: right;
			    cursor: pointer;
			}
			.create {
				background: url("<%=path%>/images/coupons/sort_zss.png");
			}
			a{
				color: #039;
			}
			#tbody td{
				text-overflow: ellipsis;
			    -moz-text-overflow: ellipsis;
			    overflow: hidden;
				padding: 0px 4px;
				vertical-align: middle;
				line-height: 20px;
			}
			#queryId input{
				height: 24px;
			}
			button {
				width: 44px;
			    height: 24px;
			    line-height: 24px;
			    background-color: transparent;
			    background-repeat: no-repeat;
			    background-position: 0 -203px;
			    border: 0;
			    cursor: pointer;
			    font: 12px/1.5 arial,tahoma,\5b8b\4f53;
			    margin: 0 0 0 5px;
			    outline: none;
			    background-image: url('<%=path%>/include/css/img/xs_bgx.png');
			}
	</style>
	<script type="text/javascript">
	$(function(){
		_search();
	});

	var pagination;
	function _search() {
		var rangeStart = $("#rangeStart").val();
		var start = rangeStart == "" ? 0 : parseInt(rangeStart);
		var rangeEnd = $("#rangeEnd").val();
		var end = rangeEnd == "" ? 0 : parseInt(rangeEnd);
		if(end < start && end != 0){
			parent.layer.alert("截止范围应大于等于开始范围");
			return ;
		}
		var url = "<%=path%>/productGroup/queryProductList.do";
		var data = {
				proGroupName : $("#proGroupName").val(),
				uuid : $("#groupUuid").val(),
				status : $("#status").val(),
				rangeStart : rangeStart,
				rangeEnd : rangeEnd
		};
		pagination = _initPagination({'pageId':'pagination', 'url': url, 'data': data, 'rows': 6, 'callback':_initDataList});
	}
	
	function _initDataList(data) {
	 	var tpl = $('#dataTpl').html();
		$('#tbody').html(doT.template(tpl)(data.rows));
	}	
	

	function _checkAll(){
		var checked = $("#checkAll").is(':checked');
		var groupDetailUuidStr = $("#groupDetailUuidStr").val();
		if(checked){
			$("input[name='groupDetailUuid']").each(function(){
				groupDetailUuidStr += ","+this.value
				$(this).attr("checked",'true');
			});
			$("#groupDetailUuidStr").val(groupDetailUuidStr);
		}else{
			$("input[name='groupDetailUuid']").each(function(){
				$(this).removeAttr("checked");
			});
			$("#groupDetailUuidStr").val("0");
		}
	}

	function _clickkInfo(id){
		if($("#"+id).is(':checked'))
			$("#groupDetailUuidStr").val($("#groupDetailUuidStr").val()+","+id);
		else
			$("#groupDetailUuidStr").val($("#groupDetailUuidStr").val().replace(","+id,""));
	}

	function _delBatch(){
		var groupDetailUuidStr = $("#groupDetailUuidStr").val();
		if(groupDetailUuidStr == "0"){
			parent.layer.alert("请选择批量删除的分组");
			return;
		}
		groupDetailUuidStr = groupDetailUuidStr.substr(2);
		_delGroupInfo(groupDetailUuidStr);
	}

	function _delGroupInfo(id){
		$.ajax({
			type:"post",
			url:"<%=path%>/productGroup/delProductInfo.do",
			dataType:"text",
			data:{uuids:id},
			success:function(data){
				parent.layer.alert(data);
				if(data=="删除成功"){
					$("#groupDetailUuidStr").val("0");
					$("#checkAll").removeAttr("checked");
					_query();
				}
			}
		});
	}

	function _checkNum(id){
    	var val = $("#"+id).val();
		if(!/^[0-9]*$/.test(val)){
			parent.layer.alert("请输入数字!");
			$("#"+id).val("0");
			return;
		}
    }

    function _updateBatch(){
    	var groupDetailUuidStr = $("#groupDetailUuidStr").val();
		if(groupDetailUuidStr == "0"){
			parent.layer.alert("请选择批量启用的分组");
			return;
		}
		groupDetailUuidStr = groupDetailUuidStr.substr(2);
		_updateStatus(groupDetailUuidStr,'1');
    }

    function _updateStatus(id,status){
        if(status=='1'){
            var arr = id.split(",");
            for(var i=0;i<arr.length;i++){
	        	var name = $("#gp"+arr[i]).val();
	        	var proName = $("#name"+arr[i]).val();
	        	if(name==null || $.trim(name) == ""){
	        		parent.layer.alert("商品 <span style='color:red'>"+proName+"</span> 组内名称不能为空");
	        		return;
	        	}
            }
        }
       $.ajax({
            type:"post",
            url:"<%=path%>/productGroup/updateProduct.do",
            dataType:"text",
            data:{uuid:id,status:status},
            success:function(data){
            	parent.layer.alert(data);
                if(data=="保存成功"){
                	$("#groupDetailUuidStr").val("0");
					$("#checkAll").removeAttr("checked");
                    _query();
                }
            }
        });
    }

    function _updateInfo(id,val1,val2){
    	$.ajax({
            type:"post",
            url:"<%=path%>/productGroup/updateProduct.do",
            dataType:"text",
            data:{uuid:id,proGroupName:val1,sortNum:val2},
            success:function(data){
                if(data=="保存成功") _query();
            }
        });
    }
    
    function _addBatchProduct(){
    	var url = "<%=path%>/productGroup/toProductInfoPage.do?groupUuid="+$("#groupUuid").val();
    	parent.layer.open({
  			title: '商品信息',
  			type: 2, 
  			area: ['850px', '420px'],
  			content: [url,'no'], //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: [url, 'no']
  			end: function(){
  				_query();
  			}
		});
    }

    function _query(){
    	resetPage('<%=cKey%>');
    	_search();
    }
    function _goback(){
    	 window.location.href = "<%=path%>/productGroup/toProductGroupListPage.do";
    }
</script>
	</head>

	<body style="font-family: '微软雅黑';">
		<div id="contentDiv" style="padding:4px; width:99%;">
		<input type="hidden" id="groupUuid" name="groupUuid" value="${uuid}"/>
			<div class="colnums-2-ab-b" style="overflow-x:auto;">
				<div class="toptil" >
					${bean.GROUP_NAME }
				</div>
				<div></div>
				<div id="queryId" style="border: 1px solid #e0e0e0;background: #f5f5f5;padding-left:10px;margin-bottom:10px;height: 40px;line-height: 40px;font-size:14px;">
					商品组内名称:<input id="proGroupName" name="proGroupName" placeholder="请输入商品组内名称" style="font-size: 12px;height: 24px;width: 110px;padding-left: 3px" type="text" />&nbsp;
					状态:<select id="status" name="status" style="font-size: 12px;height: 24px;width: 60px;padding-left: 3px" >
								<option value="">全部</option>
								<option value="0">禁用</option>
								<option value="1">启用</option>
							</select>&nbsp;
					顺序范围:<input onblur="_checkNum(this.id)" id="rangeStart" name="rangeStart" style="width: 60px;height: 24px; padding-left: 3px;font-size: 12px;" type="text"/>
					至 <input onblur="_checkNum(this.id)" id="rangeEnd" name="rangeEnd" style="width: 60px;height: 24px; padding-left: 3px;font-size: 12px;" type="text"/>&nbsp;
					<button class="cxx_btn" type="button" onclick="_query()">查询</button>
					<button class="cxx_btn" type="button" onclick="_addBatchProduct()">新增</button>
					<button style="width: 66px;background-size: 180px 458px;" type="button" onclick="_updateBatch()">批量启用</button>
					<button style="width: 66px;background-size: 180px 458px;" type="button" onclick="_delBatch()">批量删除</button>
					<button class="cxx_btn" type="button" onclick="_goback()">返回</button>
				</div>
				<div class="row-fluid dataTables_wrapper" >
					<table id="listTable"
						class="table table-hover table-nomargin table-bordered usertable dataTable"
						style="width: 100%; border-spacing: 0;table-layout: fixed;">
						<thead>
							<tr class="trBgd"
								style="background-color: #eee;text-align: center; height: 31px; border: 1px solid #ddd; white-space: nowrap; background-position: 0 -123px; line-height: 30px; font-weight: bold;">
								<th style="width:5%;">
									<input id="checkAll" type="checkbox" name="checkAll" onclick="_checkAll()" value="" star="3" mainpro="">
									<input type="hidden" id="groupDetailUuidStr" name="groupDetailUuidStr" value="0"/>
								</th>
								<th style="width:5%;">
									序号
								</th>
								<th style="width:8%;">
									图片
								</th>
								<th style="width:19%;">
									组内名称
								</th>
								<th style="width:19%;">
									商品名称
								</th>
								<th style="width:8%;">
									价格
								</th>
								<th style="width:8%;">
									状态
								</th>
								<th style="width:8%;">
									顺序
								</th>
								<th style="width:10%;">
									上架日期
								</th>
								<th style="width:10%;">
									操作
								</th>
								
							</tr>
						</thead>
						<tbody id="tbody" style="font-size: 13px">
						</tbody>
					</table>
					<div class="dataTables_paginate paging_full_numbers">
						<span id="innerHtml"> </span>
					</div>
					<div id="pagination"></div>
					<div>
						<div style="height: 30px;"></div>
						<!-- 分类列表div结束 -->
						<div class="clear"></div>
					</div>
				</div>
				</div>
			</div>
	</body>
	<script type="text/javascript">
	$(document).ready(function(){
			_reHeight("rightFrame","contentDiv");
	 });
</script>
	<script id="dataTpl" type="text/template">
		{{ for (var i = 0; i < it.length; i ++) { }}  
		{{     var row = it[i]; }}
			<tr style='line-height: 20px;white-space: nowrap;'>
				<td style='text-align:center;vertical-align: middle;width:5%;'>
					<input id='{{=row.GROUP_DETAIL_UUID}}' {{if(row.STATUS==1){}}  disabled="disabled" {{}else{}} name="groupDetailUuid" {{}}} onclick="_clickkInfo('{{=row.GROUP_DETAIL_UUID}}')" type="checkbox" value="{{=row.GROUP_DETAIL_UUID}}" star="3" mainpro="">
				</td>
				<td style='text-align:center;vertical-align: middle;width:5%;'>{{=row.PID}}</td>
				<td style='text-align:left;vertical-align: middle;width:10%;padding:3px 0px;'>
		{{		if(row.PRODUCT_PIC!=''){}} 
					<img src='{{=row.PRODUCT_PIC}}' alt='' resizeimg='true' onmousedown='' onerror='javascript:this.src="<%=path%>/download/error/nopicture.jpg"' style='width: 50px; height: 43.5px;'>
		{{		}}}
				</td>
				<td style='text-align:left;vertical-align: middle;width:20%;'>
					<input id="name{{=row.GROUP_DETAIL_UUID}}" type="hidden" value='{{=row.PRODUCT_NAME}}'/>
		{{		if(row.STATUS==1){}} 
					{{=row.PRODUCT_GROUPNAME}}
					<input id="gp{{=row.GROUP_DETAIL_UUID}}" type="hidden" value='{{=row.PRODUCT_GROUPNAME}}'/>
		{{		}else{}}
					<input id="gp{{=row.GROUP_DETAIL_UUID}}" style='width: 130px;' onblur="_updateInfo('{{=row.GROUP_DETAIL_UUID}}',this.value,'')" value='{{=row.PRODUCT_GROUPNAME}}'/>
		{{		}}}
				</td>
				<td style='text-align:left;vertical-align: middle;width:10%;'>{{=row.PRODUCT_NAME}}</td>
				<td style='text-align:right;vertical-align: middle;width:10%;'>{{=row.PRODUCT_PRICE}}</td>
				<td style='text-align:center;vertical-align: middle;width:10%;'>{{=row.STATUS==1 ? '启用' : '禁用'}}</td>
				<td style='text-align:right;vertical-align: middle;width:10%;'>
		{{		if(row.STATUS==1){}} 
					{{=row.SORT_NUM}}
		{{		}else{}}
					<input style='text-align: right;width: 60px;' onblur="_updateInfo('{{=row.GROUP_DETAIL_UUID}}','',this.value)" value='{{=row.SORT_NUM}}'/>
		{{		}}}
				</td>
				<td style='text-align:center;vertical-align: middle;width:10%;'>{{=row.CREATE_TIME}}</td>
				<td style='text-align:center;vertical-align: middle;width:10%;border-right: 1px solid #ddd;'>
		{{		if(row.STATUS==1){}} 
           			<a href="javascript:_updateStatus('{{=row.GROUP_DETAIL_UUID}}','0')">禁用</a>&nbsp;&nbsp;
		{{		}else{}} 
           			<a href="javascript:_updateStatus('{{=row.GROUP_DETAIL_UUID}}','1')">启用</a>&nbsp;&nbsp;
					<a href="javascript:_delGroupInfo('{{=row.GROUP_DETAIL_UUID}}')">删除</a>
		{{		}}} 
				</td>
		     </tr>
		{{ } }}
	</script>
</html>
